<template>
  <div>
    <TopFilter
      :list="topFilterList"
      :cols="3"
      :collapse="false"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onColumnsChange="columns => this.columns = columns"
    >
      <template slot="controls" slot-scope="props">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addFun()">新增</el-button>
      </template>
    </FilterTable>
    <Drawer
      :visible.sync="visible"
      title="已分配角色"
      :width="920"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <distributionTemplate @close="closeHandler" :type="propstype" :getdata="propsdata" />
    </Drawer>
  </div>
</template>
<script>
import { getorgPositionList } from '@/api/common/auth/positionAuth/index';
import distributionTemplate from './distributionTemplate.vue';
export default {
  name: 'zjstoreindex',
  data() {
    this.basetable = null;
    return {
      topFilterList: this.createToplist(),
      fetchApi: getorgPositionList, //调用接口
      fetchParams: {
        limit: 5,
        pageNum: 1,
        positionCode: '',
        positionName: '',
        dataSource: '10451003',
        dataType: 10461001
      }, //调用数据
      columns: this.createTablelist(),
      visible: false,
      // 一级交互形式
      propstype: null,
      propsdata: {
        id: '',
        code: '',
        codename: ''
      }
    };
  },
  components: {
    distributionTemplate
  },
  mounted() {
    this.basetable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createToplist() {
      return [
        {
          type: 'INPUT',
          label: '职位代码',
          fieldName: 'positionCode',
          placeholder: '职位代码',
          initialValue: '',
          focus: () => {
            // this.topFilterList[0].initialValue = '刘德华';
            // this.topFilterList = [...this.topFilterList];
          }
        },
        {
          type: 'INPUT',
          label: '职位名称',
          fieldName: 'positionName',
          placeholder: '职位名称',
          initialValue: '',
          focus: () => {
            // this.topFilterList[0].initialValue = '刘德华';
            // this.topFilterList = [...this.topFilterList];
          }
        }
      ];
    },
    changeHandle(data) {
      this.fetchParams = Object.assign({}, data);
    },
    collapseHandle(val) {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    createTablelist() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.emitFun(props)}>
                  编辑
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.detailFun(props)}>
                  查看
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '职位代码',
          dataIndex: 'positionCode',
          sorter: false,
          filter: false,
          render: props => {
            return <span>{props.row.positionCode}</span>;
          }
        },
        {
          title: '职位名称',
          dataIndex: 'positionName',
          sorter: false,
          filter: false,
          render: props => {
            return <span>{props.row.positionName}</span>;
          }
        }
      ];
    },
    emitFun(data) {
      this.propsdata.id = data.row.orgPositionId;
      this.propsdata.code = data.row.positionCode;
      this.propsdata.codename = data.row.positionName;
      this.propstype = 'emit';
      this.visible = true;
    },
    detailFun(data) {
      this.propsdata.id = data.row.orgPositionId;
      this.propsdata.code = data.row.positionCode;
      this.propsdata.codename = data.row.positionName;
      this.propstype = 'show';
      this.visible = true;
    },
    addFun() {
      this.propstype = 'add';
      this.visible = true;
    },
    closeHandler(val) {
      this.visible = false;
      this.propstype = null;
    }
  }
};
</script>

